<template>
  <view class="myMsg_container app_container_page">
    <form @submit="formSubmit" @reset="formReset">
      <view class="form">
        <view class="formContent">
          <view class="uni-form-item uni-column">
            <view class="name lab">家长姓名：</view>
            <input class="uni-input" name="input" placeholder="请输入您的姓名" v-model="form.name" />
          </view>
          <view class="uni-form-item uni-column">
            <view class="mobile lab">手机号：</view>
            <input class="uni-input" name="input" :disabled="true" v-model="form.mobile" />
          </view>
          <view class="uni-form-item uni-column">
            <view class="relation lab">关系：</view>
            <radio-group name="radio" @change="changeRelation">
              <label style="margin-right: 30rpx"> <radio :checked="form.relation === '0'" value="0" color="black" style="transform: scale(0.7)" /><text>爸爸</text> </label>
              <label> <radio :checked="form.relation === '1'" value="1" color="black" style="transform: scale(0.7)" /><text>妈妈</text> </label>
            </radio-group>
          </view>
          <view class="uni-form-item uni-column">
            <view class="name lab">本人身高：</view>
            <input class="uni-input heightInput" name="input" placeholder="请输入您的身高" type="digit" v-model="form.myHeight" />
            <view>cm</view>
          </view>
          <view class="uni-form-item uni-column">
            <view class="name lab">配偶身高：</view>
            <input class="uni-input heightInput" name="input" placeholder="请输入您配偶的身高" type="digit" v-model="form.spouseHeight" />
            <view>cm</view>
          </view>
        </view>
        <view class="uni-btn-v">
          <button form-type="submit" :plain="true">确定</button>
        </view>
      </view>
    </form>
  </view>
</template>

<script>
import { editInfo, myInfo } from '@/api/user.js'

export default {
  data() {
    return {
      form: {
        name: '',
        mobile: '',
        myHeight: '',
        spouseHeight: '',
        relation: ''
      }
    }
  },
  methods: {
    changeRelation() {
      this.form.myHeight = ''
      this.form.spouseHeight = ''
    },
    formSubmit: function (e) {
      this.form.relation = e.detail.value.radio
      editInfo(this.form)
        .then(() => {
          uni.switchTab({
            url: '/pages/user/index'
          })
        })
        .catch((err) => {
          console.log(err)
        })
    }
  },
  async onLoad() {
    myInfo().then((res) => {
      if (res.code === 200) {
        this.form.name = res.data.name
        this.form.mobile = res.data.mobile
        this.form.myHeight = res.data.myHeight
        this.form.spouseHeight = res.data.spouseHeight
        this.form.relation = res.data.relationship
      }
    })
  }
}
</script>

<style lang="scss">
.myMsg_container {
  padding: 0 30rpx 100rpx 30rpx;
  width: 100%;
  height: 100%;

  .form {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .formContent {
      .uni-form-item {
        font-size: 30rpx;
        line-height: 100rpx;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #cccccc;
        .heightInput {
          width: 300rpx;
        }
        .lab {
          width: 220rpx;
        }
      }
    }
    .uni-btn-v {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;

      button {
        padding-left: 0;
        padding-right: 0;
        width: 400rpx;
        height: 100rpx;
        line-height: 100rpx;
        background-color: $theme-color;
        border: 0;
        border-radius: 50rpx;
        font-size: 40rpx;
      }
    }
  }
}
</style>
